<template>
  <a-modal
    title="联名信息"
    width="750px"
    centered
    :visible="jointNameVisible"
    :maskClosable="false"
    :footer="null"
    @cancel="close"
  >
    <div class="table-content">
      <a-table
        :pagination="pagination"
        :columns="columns"
        :data-source="tableData"
        :scroll="{ y: '400px' }"
        rowKey="id"
      >
        <template slot-scope="text, record, index" slot="listIndex">
          <span>{{ index + 1 }}</span>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script>
import paging from 'mixins/paging'
export default {
  mixins: [paging],
  props: {
    jointNameVisible: {
      type: Boolean,
      default: false
    },
    //关闭弹框
    closeFunc: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'listIndex' }
        },
        {
          title: '联名人',
          dataIndex: 'jointName'
        },
        {
          title: '状态',
          dataIndex: 'state'
        },
        {
          title: '回复方式',
          dataIndex: 'replyWay'
        }
      ],
      tableData: [
        {
          id: '1',
          jointName: 'xxx',
          state: '测试',
          replyWay: '测试'
        },
        {
          id: '2',
          jointName: 'xxx',
          state: '测试',
          replyWay: '测试'
        }
      ]
    }
  },
  mounted() {
    this.pagination.total = 2
  },
  watch: {
    jointNameVisible(n) {
      console.log(n)
    }
  },
  methods: {
    //关闭弹框
    close() {
      this.$emit('closeFunc')
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .table-content .ant-table-content {
  border: 1px solid #e8e8e8;
  border-bottom: none;
}
</style>

